<template>
  <el-container>
    <el-header><Headerhome></Headerhome></el-header>
    <el-container>
          <el-aside style="width: 15%;background-color: #ffffff;">
            <el-row>
              <el-col :xs="24" :sm="24" :md="24" :lg="24">
              <el-menu default-active="2" class="el-menu-vertical-demo hidden-xs-only" v-for="(goodType, index) in typeList" :key="goodType.typeId">
              <el-menu-item>
                <el-button @click="type(goodType.typeId)" style="color: hotpink;" type="text">{{ goodType.goodsType }}({{ goodType.sum }})</el-button>
              </el-menu-item>
            </el-menu>
            </el-col>
            </el-row>
          </el-aside>
      <div class="home-box">
        <el-row :gutter="10">
          <el-col :xs="12" :sm="10" :md="10" :lg="10" :offset="7">
            <div style="margin-top: 10px;">
              <el-input placeholder="可根据资料名或描述查找(直接点击查询所有)" v-model="searchname2" class="input-with-select">
                <el-button slot="append" icon="el-icon-search" @click="search()"></el-button>
              </el-input>
            </div>
          </el-col>
         </el-row>
         <el-row>
           <el-col :xs="12" :sm="2" :md="6" :lg="6" :offset="1">
                  <h2 style="color: plum">热搜排行榜:</h2>
           </el-col>
         </el-row>
         <el-row>

            <el-col  v-for="(words, index) in wordData" :key="words.index"  :xs="6" :sm="2" :md="2" :lg="2" :offset="1" >
               <el-badge :value="words.score"  class="item" :max="99" >
                 <el-tag type="danger" size="mini">{{words.value}}</el-tag>
               </el-badge>
           </el-col>
         </el-row>
        <el-row>
          <el-col :xs="20" :sm="10" :md="8" :lg="8" v-for="(good, index) in goods" :key="good.goodId">
            <div class="grid-content bg-purple">
              <el-card style="width: 300;margin:20px;height: 350px;text-align: center;" shadow="hover">
                <div slot="header" class="clearfix">
                  <el-button v-show="isAdmin" style="float: left; padding: 3px 0;  color: #F76809" type="infor" @click="upload(good.goodId)">上传文件</el-button>
                  <span>{{ good.goodName }}</span>
                  <el-button v-show="isAdmin" style="float: right; padding: 3px 0;" type="danger" @click="del(good.goodId)">删除</el-button>
                  <el-button v-show="isShow2" style="float: right;  padding: 3px 0;color: hotpink;" type="infor" @click="buy(good.goodId)">抢购</el-button>
                </div>
                <div class="text item">
                  <span pros="good.price" v-if="good.price == 0" style="color: red;float: left;">免费</span>
                  <span pros="good.price" v-else style="color: red;float: left;">价格：{{ good.price }}元</span>
                  <span style="color: sandybrown;">数量：{{ good.count }}份</span>
                </div>
                <div class="text item">
                  <h4 style="color: darkgray">{{ good.message }}</h4>
                </div>
                <div class="text item"><img :src="'http://139.159.144.167/' + good.images" style="width: 200px;height: 150px;" /></div>
              </el-card>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :sm="24" :md="2" :lg="2" >
             <el-button style="margin-left: 20px;" size="mini" type="danger" plain @click="excelGoods()" icon="el-icon-document">导出技术点报价</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :sm="10" :md="10" :lg="10" :offset="6">
            <el-pagination v-show="isShow"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[3, 6, 9, 12]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="this.total"
            ></el-pagination>
          </el-col>
        </el-row>
      </div>
    </el-container>
    <el-footer><Footer></Footer></el-footer>
  </el-container>
  <!-- v-loading="loading" -->
</template>

<script>
import Footer from '@/components/Footer';
import Headerhome from '@/components/Headerhome';
export default {
  data() {
    return {
      wordData:null,
      isShow2: null,
      isShow: true,
      searchname2: null,
      searchname: null,
      typeId: null,
      typeList: null,
      goods: null,
      current: 1,
      size: 6,
      currentPage: 1,
      pageSize: 6,
      total: null,
     isAdmin: this.$store.getters.getUser().isAdmin,
      userId: this.$store.getters.getUser().userId
    };
  },

  // 组件声明
  components: {
    Footer: Footer,
    Headerhome: Headerhome
  },
  created() {
    this.findAll(), this.findAllType(), this.findWords(),this.findShow();
  },
  methods: {
    findShow() {
      this.isAdmin = this.$store.getters.getUser().isAdmin;
      if (this.isAdmin) {
        this.isShow2 = false;
      } else {
        this.isShow2 = true;
      }
    },
    findWords(){
         let _this = this;
         this.axios
           .get(this.apiUrl1 + '/good/findRedisKeywords')
           .then(res => {
              _this.wordData=res.data
           })
           .catch(err => {
             console.log(err);
           });
    },
    findAll() {
      let _this = this;
      if ((this.searchname != null) & (this.searchname != '')) {
        this.axios
          .get(this.apiUrl1 + '/good/es?searchname=' + this.searchname)
          .then(res => {
            _this.goods = res.data,
            _this.isShow = false;
             _this.typeId=null;
            this.searchname = null;
          })
          .catch(err => {
            console.log(err);
          });
      } else {
        if (this.typeId != null) {
          this.axios
            .get(this.apiUrl1 + '/good/findAllTypeId?current=' + this.current + '&size=' + this.size + '&typeId=' + this.typeId)
            .then(res => {
              _this.goods = res.data.goodsPage;
              _this.total = res.data.total;
              this.isShow = true;

            })
            .catch(err => {
              console.log(err);
            });
        } else {
          this.axios
            .get(this.apiUrl1 + '/good/findAll?current=' + this.current + '&size=' + this.size)
            .then(res => {
              _this.goods = res.data.goodsPage;
              _this.total = res.data.total;
              this.isShow = true;
            })
            .catch(err => {
              console.log(err);
            });
        }
      }
    },
    type(val) {
       (this.current = 1),(this.typeId = val), this.findAll();
    },
    search() {
      this.typeId = null;
      (this.searchname = this.searchname2),
      this.findAll(),
      this.findWords();
    },
    findAllType() {
      let _this = this;
      this.axios
        .get(this.apiUrl1 + '/good/findAllType')
        .then(res => {
          _this.typeList = res.data;
        })
        .catch(err => {
          console.log(err);
        });
    },
    handleSizeChange: function(pageSize) {
      (this.size = pageSize), this.findAll();
    },
    handleCurrentChange: function(currentPage) {
      (this.current = currentPage), this.findAll();
    },
    buy(Id) {
      let _this = this;
      this.axios
        .get(this.apiUrl1 + '/good/seckillUserGood?goodId=' + Id + '&userId=' + this.userId)
        .then(res => {

          _this.$router.push('/order');
        })
        .catch(err => {
          console.log(err);
        });
    },
    upload(goodId) {
      this.$router.push('/file?id=' + goodId);
    },
    excelGoods(){
      let _this = this;
       this.axios.get(this.apiUrl1+'/good/export', { responseType: "blob" })
             .then((res) => {

               const blob = new Blob([res.data], { //取响应回来的数据
                           type: "application/vnd.ms-excel;charset=utf-8",
                         });
                         const href = window.URL.createObjectURL(blob); // 创建下载的链接
                         const downloadElement = document.createElement("a");
                         downloadElement.href = href;
                         downloadElement.download = '技术点报价列表';
                         document.body.appendChild(downloadElement);
                         downloadElement.click(); // 点击下载
                         document.body.removeChild(downloadElement); // 下载完成移除元素
                         window.URL.revokeObjectURL(href); // 释放掉blob对象
             })
             .catch((fail) => {
               console.error(fail);
             });
    },
    del(goodId) {
      let _this = this;
      this.axios
        .get(this.apiUrl5 + '/good/del?goodId=' + goodId)
        .then(res => {
          if (res.data.state) {
            _this.$message({
              message: res.data.msg,
              type: 'success'
            });
          } else {
            this.$message({
              message: res.data.msg,
              type: 'warning'
            });
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>

<style>
body {
  margin: 0;
}

.home-box {
  width: 100%;
  padding: 2px;
  float: right;
  /*  margin: 100px auto; */
  padding: 20px 50px 10px 10px;
  border: 1px solid #ffffff;
  /* background-image: url(../../static/zm1.jpg); */
}

.el-header,
.el-footer {
  /*  background-color: #B3C0D1; */
  /* background-image: url(../../static/zm6.jpg); */
  /*  color: #333; */
  /* text-align: center; */
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
  line-height: 50px;
}

.el-aside {
  color: #ffffff;
  text-align: center;
  line-height: 200px;
  height: 650px;
}

.el-main {
  /* color: #333; */
  text-align: center;
  /* height: 750px; */
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  /*  background: #99a9bf; */
}
.bg-purple {
  /* background: #d3dce6; */
}
.bg-purple-light {
  /*  background: #e5e9f2; */
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

/* .clearfix:before,
           .clearfix:after {
               display: table;
               content: "";
           }

           .clearfix:after {
               clear: both
           } */
.el-select .el-input {
  width: 800px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
.item {
  margin-top: 10px;
  margin-right: 20px;
}

</style>
